<wide-header-page title="{{ wallet.name }} [{{wallet.m}}-{{wallet.n}}]" hideBackButton="true">
  <ion-buttons left>
    <button class="close-container disable-hover" (click)="close()" ion-button>
      <ion-icon ios="md-close" md="md-close"></ion-icon>
    </button>
  </ion-buttons>
  <ion-buttons right>
    <button clear wide-header-bar-button (click)="showDeletePopup()" *ngIf="wallet.notAuthorized || (!wallet.notAuthorized && secret)" ion-button>
      <span *ngIf="!canSign" translate>Delete</span>
      <span *ngIf="canSign" translate>Hide</span>
    </button>
  </ion-buttons>
  <div page-content>
    <div *ngIf="!wallet.notAuthorized" class="copayers-header">
      <div class="copayers-header-content">
        <div class="title" translate>Wallet Invitation</div>
        <div class="text" translate>Share this address with the devices joining this account.</div>
        <div class="text" translate>Each copayer has their own recovery phrase. To recover funds stored in a Shared Wallet you will need the recovery phrase from each copayer.</div>
      </div>
    </div>
    <div class="qr-container" *ngIf="!wallet.notAuthorized && secret">
      <bp-qr-code *ngIf="!useLegacyQrCode" class="card qr-card" copy-to-clipboard="{{ secret }}" contents="{{ secret }}" mask-x-to-y-ratio="1">
        <img [ngClass]="{'testnet': wallet.network === 'testnet', 'background_xrp': wallet.coin === 'xrp'}" src="assets/img/currencies/{{ wallet.coin }}.svg" slot="icon" />
      </bp-qr-code>
      <div *ngIf="useLegacyQrCode" class="card qr-card" copy-to-clipboard="{{ secret }}">
        <ngx-qrcode hide-toast="true" qrc-value="{{ secret }}" qrc-class="aclass" qrc-errorCorrectionLevel="M"></ngx-qrcode>
      </div>

    </div>

    <div class="white-card" *ngIf="!wallet.notAuthorized && copayers && secret">
      <span class="title">{{'Waiting for authorized copayers to join' | translate}}</span>
      <div class="timeline-item" *ngFor="let copayer of copayers; let i = index">
        <div class="timeline-content">
          <div class="timeline-content-icon">
            <div class="line" *ngIf="copayers.length < wallet.n">
              <ion-icon name="checkmark" item-end color="success"></ion-icon>
            </div>
          </div>
          <div class="timeline-content-label ellipsis">
            <div *ngIf="copayer.id == wallet.copayerId" class="name ellipsis">{{'Me'|translate}}</div>
            <div *ngIf="copayer.id != wallet.copayerId" class="name ellipsis">{{copayer.name}}</div>
          </div>
        </div>
      </div>
      <div class="timeline-item" *ngIf="!wallet.isComplete() && copayers.length < wallet.n">
        <div class="timeline-content">
          <div class="timeline-content-icon">
            <div class="line no-border">
              <ion-icon name="ios-time-outline" item-end></ion-icon>
            </div>
          </div>
          <div class="timeline-content-label ellipsis">
            <div class="name ellipsis">{{'Waiting'|translate}}</div>
          </div>
        </div>
      </div>
    </div>

    <button class="share-button" *ngIf="isCordova && !wallet.notAuthorized" ion-button clear (click)="shareAddress()">
      {{ 'Share this invitation with your copayers' | translate }}
      &rarr;
    </button>

    <div class="error-msg" *ngIf="wallet.notAuthorized" padding>
      <h3 class="assertive" translate>Wallet incomplete and broken</h3>
      <div translate>Delete it and create a new one</div>
    </div>
  </div>
</wide-header-page>